.page .header {
  box-shadow: 0 1px 3px rgba(18, 18, 18, 0.1);
}
.page .header a {
  height: 90px;
  display: flex;
  align-items: center;
  padding: 15px;
}
.page .header .line {
  height: 1px;
  background-color: #eee;
  margin: 0 15px;
}
.page .header .avater {
  margin-right: 15px;
  margin-left: 3px;
}
.page .header .avater img {
  border-radius: 50%;
  width: 60px;
  height: 60px;
}
.page .header .info {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  height: 100%;
}
.page .header .info .title {
  display: flex;
}
.page .header .info .title .name {
  font-size: 17px;
  margin-bottom: 2px;
}
.page .header .info .title .icon {
  width: 20px;
  height: 20px;
  background-size: cover;
}
.page .header .info .No text {
  margin-right: 8px;
  color: #757575;
  font-size: 15px;
}
.page .header .into {
  display: flex;
  align-items: center;
  height: 100%;
  width: 25px;
}
.page .header .into .icon {
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg t='1647427676300' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2211' width='200' height='200'%3E%3Cpath d='M711.095467 468.096c-84.821333-142.250667-169.728-284.416-254.634667-426.666667A84.821333 84.821333 0 0 0 339.895467 12.16a85.546667 85.546667 0 0 0-29.098667 117.077333c76.117333 127.573333 152.32 255.146667 228.522667 382.72L310.7968 894.762667a85.589333 85.589333 0 0 0 29.098667 117.077333c40.192 24.234667 92.330667 11.093333 116.565333-29.269333 84.906667-142.250667 169.813333-284.416 254.634667-426.666667 18.986667-31.744 18.986667-56.064 0-87.808z' p-id='2212' fill='%23757575'%3E%3C/path%3E%3C/svg%3E ");
  background-size: cover;
}
.page .header .personalInfo {
  padding: 12px;
}
.page .header .personalInfo .item {
  display: flex;
  height: 45px;
  align-items: center;
}
.page .header .personalInfo .item .icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.page .header .personalInfo .item .title {
  font-size: 16px;
}
.page .header .personalInfo .item .msg {
  flex: 1;
  text-align: right;
  color: #757575;
  font-size: 15px;
}
.page .cardRecord {
  margin-top: 5px;
  padding: 15px;
}
.page .cardRecord .h2 {
  font-size: 17px;
  margin-bottom: 10px ;
}
.page .cardRecord .list .item {
  display: flex;
  align-items: center;
  height: 65px;
  border-bottom: 1px solid #eee;
}
.page .cardRecord .list .item .icon {
  width: 25px;
  height: 25px;
  margin-right: 15px;
  background-size: cover;
  background-image: url("data:image/svg+xml,%3Csvg t='1649136884698' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='6248' width='32' height='32'%3E%3Cpath d='M166.4 102.4a51.2 51.2 0 1 1 0 102.4H153.6a51.2 51.2 0 0 0-51.2 51.2v614.4a51.2 51.2 0 0 0 51.2 51.2h716.8a51.2 51.2 0 0 0 51.2-51.2V256a51.2 51.2 0 0 0-51.2-51.2h-12.8a51.2 51.2 0 1 1 0-102.4h12.8a153.6 153.6 0 0 1 153.6 153.6v614.4a153.6 153.6 0 0 1-153.6 153.6H153.6a153.6 153.6 0 0 1-153.6-153.6V256a153.6 153.6 0 0 1 153.6-153.6z m279.552 652.7488l-2.7392-0.1792a51.5328 51.5328 0 0 1-24.3712-8.8576l-0.6912-0.512a47.0272 47.0272 0 0 1-6.3488-5.376l2.7392 2.56a51.072 51.072 0 0 1-1.8944-1.7408l-0.8448-0.8448-179.2-179.2a51.2 51.2 0 0 1 72.3968-72.3968l146.7904 146.7648 284.2368-227.328a51.2 51.2 0 1 1 63.9488 79.9488l-320 256-1.4848 1.152a51.072 51.072 0 0 1-1.2288 0.896l2.7136-2.048a51.712 51.712 0 0 1-21.248 10.0864l-0.512 0.1024a46.08 46.08 0 0 1-8.0128 0.9728h-4.2752zM307.2 0a51.2 51.2 0 0 1 51.2 51.2v179.2a51.2 51.2 0 1 1-102.4 0V51.2a51.2 51.2 0 0 1 51.2-51.2z m409.6 0a51.2 51.2 0 0 1 51.2 51.2v179.2a51.2 51.2 0 1 1-102.4 0V51.2a51.2 51.2 0 0 1 51.2-51.2z m-153.6 102.4a51.2 51.2 0 1 1 0 102.4h-102.4a51.2 51.2 0 1 1 0-102.4z' p-id='6249' fill='%23707070'%3E%3C/path%3E%3C/svg%3E");
}
.page .cardRecord .list .item .info {
  flex: 1;
}
.page .cardRecord .list .item .info .onlineTime {
  font-size: 15px;
  color: #757575;
}
.page .cardRecord .list .item .status {
  font-size: 14px;
  color: #009688;
}
